<template>
  <div>
    <div class="minel_tou">
      <p class="min_p1">
        <img class="img1" src="@/assets/fanhui.png"  @click="this.$router.go(-1)">
        <span class="min_span1">我的等级</span>
        <span class="min_span2">等级说明</span>
      </p>
    </div>
    <div class="minel_zhong">
      <img class="img2" src="@/assets/meinv.jpg">
      <p><span class="min_span3">Daisy</span></p>
      <p><span class="min_span4">积分 500  经验值 6000</span></p>
    </div>
    <div class="minel_zhong2">
      <span class="min_span5">6000/9000</span>
      <van-steps
        :active="active"
        active-icon="success"
        active-color="#fa9167"
      >
        <van-step>Lv1</van-step>
        <van-step>Lv2</van-step>
        <van-step>Lv3</van-step>
        <van-step>Lv4</van-step>
      </van-steps>
      <span class="min_span5">距离下一等级还差<span class="min_span6">3000</span>经验值</span>
    </div>
    <div class="minel_xia">
      <div class="min_div1"><p class="min_spandiv1">当前等级权益</p></div>
      <div class="min_div2">
        <div class="min_div3">
          <div class="min_div3_div">
            <span class="min_div3_div_span">icon</span>
          </div>
          <p class="min_div3_p"><span class="min_div3_p_span1">积分抵扣预约金</span></p>
          <p><span class="min_div3_p_span2">最高抵扣2%</span></p>
        </div>
        <div class="min_div3">
          <div class="min_div3_div">
            <span class="min_div3_div_span">icon</span>
          </div>
          <p class="min_div3_p"><span class="min_div3_p_span1">发布帖子</span></p>
          <p><span class="min_div3_p_span2">发布帖子获积分</span></p>
        </div>
        <div class="min_div3">
          <div class="min_div3_div">
            <span class="min_div3_div_span">icon</span>
          </div>
          <p class="min_div3_p"><span class="min_div3_p_span1">发布评论</span></p>
          <p><span class="min_div3_p_span2">发布评论获积分</span></p>
        </div>
        <div class="min_div3">
          <div class="min_div3_div2">
            <span class="min_div3_div_span1">icon</span>
          </div>
          <p class="min_div3_p"><span class="min_div3_p_span1">向医生提问</span></p>
          <p><span class="min_div3_p_span2">需升级至Lv3</span></p>
        </div>
        <div class="min_div3">
          <div class="min_div3_div2">
            <span class="min_div3_div_span1">icon</span>
          </div>
          <p class="min_div3_p"><span class="min_div3_p_span1">发布日记</span></p>
          <p><span class="min_div3_p_span2">需升级至Lv3</span></p>
        </div>
      </div>
        <div class="min_div1"><p class="min_spandiv1">做任务升级</p></div>
        <div class="min_div_2">
          <div class="min_div_2_1">
            <div class="min_div3_div_1">
              <span class="min_div3_div_span">icon</span>
            </div>
            <div class="min_div3_div_2">
              <p><span class="min_div3_div_2_span1">完善资料</span></p>
              <p><span class="min_div3_div_2_span2">经验值+10</span></p>
            </div>
            <div class="min_div3_div_3">
              <p><button class="but1" @click="wan"><span class="but_span">去完善</span></button></p>
            </div>
          </div>
          <div class="min_div_2_1">
            <div class="min_div3_div_1">
              <span class="min_div3_div_span">icon</span>
            </div>
            <div class="min_div3_div_2">
              <p><span class="min_div3_div_2_span1">发布评价</span></p>
              <p><span class="min_div3_div_2_span2">经验值+30 积分+5</span></p>
            </div>
            <div class="min_div3_div_3">
              <p><button class="but1"><span class="but_span">去评价</span></button></p>
            </div>
          </div>
          <div class="min_div_2_1">
            <div class="min_div3_div_1">
              <span class="min_div3_div_span">icon</span>
            </div>
            <div class="min_div3_div_2">
              <p><span class="min_div3_div_2_span1">发布帖子</span></p>
              <p><span class="min_div3_div_2_span2">经验值+30 积分+5</span></p>
            </div>
            <div class="min_div3_div_3">
              <p><button class="but1"><span class="but_span">去发布</span></button></p>
            </div>
          </div>
          <div class="min_div_2_4">
            <div class="min_div3_div_1">
              <span class="min_div3_div_span">icon</span>
            </div>
            <div class="min_div3_div_2">
              <p><span class="min_div3_div_2_span1">发布日记</span></p>
              <p><span class="min_div3_div_2_span2">经验值+10</span></p>
            </div>
            <div class="min_div3_div_3">
              <p><button class="but1"><span class="but_span">去发布</span></button></p>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const active=1
let wan=function(){
 
}
</script>

<style>
button:hover{cursor: pointer;}
.min_div3_div_3{float: right;margin: 20px;width: 60px;height: 40px;}
.but1{border: 0;background-color: #ec7b67;width: 60px;}
.but_span{font-size: 14px;color: #ffffff;}
.min_div3_div_2{width: 100px;height: 40px;float: left;margin: 10px;}
.min_div3_div_2 p{height: 20px;}
.min_div3_div_2_span1{font-size: 14px;}
.min_div3_div_2_span2{font-size: 10px;color: #cccccc;}
.minel_tou{width: 375px;height: 44px;line-height: 44px;}
.min_spandiv1{margin-top: 20px;}
.min_div_2_1{width: 100%;height: 75px;border-bottom: 1px solid #f2f2f2;}
.minel_xia{width: 390px;min-height: 300px;padding: 1px 20px 20px 20px;background-color: #f2f2f2;margin-top:10px ;}
.minel_zhong{width: 375px;height: 170px;text-align: center;}
.minel_zhong2{width: 375px;height: 120px;}
.min_p1{width: 375px;height: 21px;vertical-align: middle;}
.img1{width: 9px;height: 14px;vertical-align: middle;margin-left: 20px;}
.img2{width: 64px;height: 64px;margin-top: 20px;}
.min_span1{width: 64px;height: 21px;vertical-align: middle;margin-left: 136px;}
.min_span2{width: 64px;height: 21px;margin-left: 85px;vertical-align: middle;font-size: 14px;}
.min_span3{width: 54.67px;height: 26px;font-size: 20px;font-weight: bold;}
.min_span4{height: 26px;font-size: 12px;}
.min_span5{width: 54.67px;height: 26px;font-size: 10px;color: #9999a5;margin-left:105px;}
.min_span6{width: 54.67px;height: 26px;font-size: 10px;color: #333333;}
.min_div1{width: 100%;height: 40px;text-align: center;}
.min_div2{width: 100%;height: 245px;background-color: #ffffff;}
.min_div_2{width: 100%;height: 295px;background-color: #ffffff;}
.min_div3{width: 116px;height: 120px;float: left;text-align: center;}
.min_div3_div{width: 40px;height: 40px;background-color: #fdf2f0;border-radius: 50%;margin: auto;line-height: 35px;margin-top: 15px;}
.min_div3_div_1{width: 40px;height: 40px;background-color: #fdf2f0;border-radius: 50%;line-height: 35px;margin-top: 15px;text-align: center;float: left;}
.min_div3_div2{width: 40px;height: 40px;background-color: #f2f2f2;border-radius: 50%;margin: auto;line-height: 35px;margin-top: 15px;}
.min_div3_div_span{font-size: 13px;color: #ee7b67;}
.min_div3_div_span1{font-size: 13px;color: #999999;}
.min_div3_p_span1{font-size: 12px;}
.min_div3_p_span2{font-size: 12px;color: #cccccc;}
.min_div3_p{margin-top: 5px;height: 20px;}
</style>